<template>
  <div>
    <el-row>
      <!-- <el-col :span="2"
        ><div class="grid-content bg-purple">&emsp;</div></el-col
      > -->
      <el-col :span="24"
        ><div class="grid-content bg-purple-light">
          <h7 >员工催收界面</h7>
          <el-row style="30px">&emsp;</el-row>
          <!-- 表格展示 -->
          <template>
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="realName" label="用户姓名" width="auto">
              </el-table-column>
              <el-table-column
                prop="userinfoTel"
                label="联系方式"
                width="auto"
              >
              </el-table-column>
              <input type="hidden" name="hdncount" value="repayRecrodId" />
              <el-table-column prop="contractId" label="合同编号" width="auto">
              </el-table-column>
              <el-table-column prop="productName" label="产品名字" width="auto">
              </el-table-column>
              <el-table-column prop="repayNum" label="还款期数" width="auto">
              </el-table-column>
              <el-table-column
                prop="repayCurrentPeriod"
                label="当前期数"
                width="auto"
              >
              
              </el-table-column>
                <el-table-column
                  prop="repayRecordId"
                  label="还款记录id"
                  width="auto"
                >
                </el-table-column>
              <el-table-column
                prop="overduePrincipal"
                label="逾期本金"
                width="auto"
              >
              </el-table-column>
              <el-table-column
                prop="overdueInterest"
                label="逾期利息"
                width="auto"
              >
              </el-table-column>
              <el-table-column
                prop="totalOverdueMoney"
                label="逾期总额"
                width="auto"
              >
              </el-table-column>
              <el-table-column prop="overdueTime" label="逾期时间" width="auto">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    @click="overdue(scope.row.reparRecordId)"
                    >催收</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </template>
          <el-row style="30px">&emsp;</el-row>
          <!-- 分页 -->
          <div class="block">
            <span class="demonstration"></span>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="query.currentPage"
              :page-sizes="pageInfo.pageSizes"
              :page-size="query.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageInfo.total"
            >
            </el-pagination>
          </div></div
      ></el-col>
      <!-- <el-col :span="2"
        ><div class="grid-content bg-purple">&emsp;</div></el-col> -->
        </el-row
    >
    <!-- 模态框 -->
    <el-dialog :visible.sync="dialogVisible" title="催收" width="30%" center>
      <el-form :model="form">
        <el-form-item label="还款记录编号" prop="repayRecord">
          <el-input
            v-model="form.repayRecord"
            placeholder="请输入还款记录编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="催收金额" prop="repayMoney">
          <el-input
            v-model="form.repayMoney"
            placeholder="请输入催收金额"
          ></el-input>
        </el-form-item>
        <el-form-item label="催收类型" prop="collectionType">
          <el-select v-model="form.collectionType" placeholder="请选择催收类型">
            <el-option
              v-for="item in typeOptions"
              :key="item.collectionId"
              :label="item.collectionType"
              :value="item.collectionId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="催收时间" prop="collectionDate">
          <el-date-picker
            v-model="form.collectionDate"
            type="datetime"
            placeholder="请选择催收时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="催收反馈" prop="collectionFeeback">
          <el-input
            type="textarea"
            v-model="form.collectionFeeback"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      typeOptions: [],
      form: {
        repayRecord: "",
        collectionDate: "",
        collectionFeeback: "",
        repayMoney: "",
        collectionType: "",
      },
      //模态框

      pageInfo: {
        pageSizes: [5, 10, 15, 20, 25],
        total: 1,
      },
      query: {
        contractId: 0,
        currentPage: 1,
        pageSize: 5,
        status: "",
      },
      tableData: [],
    };
  },
  methods: {
    handleSubmit() {
      this.$axios
        .post("collection/addRecord", this.form)
        .then((res) => {
          this.$message.success("催收成功");

          this.dialogVisible = false;
          this.form = {
            repayRecord: "",
            collectionDate: "",
            collectionFeeback: "",
            repayMoney: "",
            collectionType: "",
          };
        })
        .catch((error) => {
          this.$message.error("系统出错，请稍后再试");
        });
    },
    overdue(id) {
      this.$axios
        .get("collection")
        .then((res) => {
          this.typeOptions = res.data.data.list;
          this.dialogVisible = true;
        })
        .catch((error) => {
          this.$message.error("系统出错，请稍后再试试");
        });
    },
    changeStatus() {
      alert(this.query.status);
      this.loadManageRepay();
    },
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.loadManageRepay();
    },
    handleCurrentChange(val) {
      this.query.currentPage = val;
      this.loadManageRepay();
    },
    loadEmpOverdue() {
      this.$axios
        .post("overDue/empOverdue", this.query)
        .then((res) => {
          this.tableData = res.data.data.list;
          this.pageInfo.total = res.data.data.total;
        })
        .error((error) => {
          this.$message.error("系统出错，请稍后再试");
        });
    },
  },
  mounted() {
    this.loadEmpOverdue();
  },
};
</script>